<template>
  <div class="row">
    <div class="col-md-3 dialog-left">
      <p><span>可选表</span></p>
      <el-tree
        :data="listData"
        :props="defaultProps"
        accordion
        @node-click="handleNodeClick"
      ></el-tree>
    </div>
    <div class="col-md-9 dialog-right" id="dialog-grid" v-loading="loading">
      <Grid
        :rowData="girdData"
        :fieldList="fields"
        :page="page"
        @pageData="pageData"
      ></Grid>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import Grid from '@/views/commonView/Grid'
import { MGNDIRQUERY1, GET_DATAINFO, DATA_QUERY } from '@api/url'
import tree from '@/views/commonView/tree'

Vue.component('Grid', Grid)

export default {
  name: 'ChooseTable',
  data () {
    return {
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      listData: [],
      fields: [],
      girdData: [],
      pageSize: 15,
      currentPage: 1,
      modelId: '',
      page: {},
      loading:false,
    }
  },
  methods: {
    handleNodeClick: function (event) {
      let vm = this
      // 只有叶子节点才有对应表
      if (event.children.length === 0) {
        let tableName = event.menuId
        vm.modelId = tableName
        let param = {}
        param.optMode = '1'
        param.modelId = tableName
        param.humpNameFlag = true

        // 获取表字段信息
        let p2 = vm.$http.post(DATA_QUERY, param)
        param.pageNo = vm.currentPage
        param.pageSize = vm.pageSize
        // 获取表数据
        let p1 = vm.$http.post(GET_DATAINFO, param)
        this.loading = true
        vm.$http.all([p1, p2]).then(
          vm.$http.spread((res1, res2) => {
            let data = res1.data.data.page
            let lists = res2.data.data
            let filedData = vm.$options.methods.toData(lists)
            vm.fields = filedData
            vm.girdData = data.records
            let page = {}
            page.currentPage = vm.currentPage
            page.pageSize = data.pageSize
            page.total = data.recordNumber
            vm.page = page
            this.$emit('child-event', filedData, tableName)
          })
        ).finally(() => this.loading = false)
      }
    },

    // 分页查询
    getData (vm) {
      let param = {}
      param.optMode = '1'
      param.modelId = vm.modelId
      param.humpNameFlag = true
      param.pageNo = vm.currentPage
      param.pageSize = vm.pageSize
      vm.$http.post(GET_DATAINFO, param).then((res) => {
        let data = res.data.data.page
        let page = {}
        page.currentPage = vm.currentPage
        page.pageSize = data.pageSize
        page.total = data.recordNumber
        vm.page = page
        vm.girdData = data.records
      })
    },

    // 数据转换
    toData: function (list) {
      // todo  //
      let res = []
      let len = 0
      list.forEach((v, i) => {
        let a = {}

        a.id = tree.UUID(16)
        len = parseInt(v.fldLen)
        if (len < 80) {
          len = 80
        }
        a.width = len
        a.name = v.humpName
        a.value = v.fldCnname;
        a.modelId=v.modelId;
        a.dataType=v.fldType;
        a.colName=v.fldEnname;
        a.jsonData=v.jsonData;
        res.push(a)
      })

      return res
    },
    setData: function (field, val) {
      this.$set(this.$data, field, val)
    },
    // 递归解析tree
    readData (data) {
      // if ( Array.isArray(data)) {

      // }
      console.log(data)
      let len = data.length
      let result = new Array(len)

      data.forEach((v, i) => {
        let a = {}
        // a.id = v.id;
        a.parentId = v.parentId
        a.lable = v.name
        a.value = v.menuId

        a.children = this.readData(v.children)
        result[i] = a
      })

      return result
    },
    pageData (type, val) {
      if (type === 'SizeChange') {
        this.pageSize = val
      } else {
        this.currentPage = val
      }
      this.$options.methods.getData(this)
    }
  },
  watch: {},
  mounted () {
    // 表列表
    this.$nextTick(() => {
      let vm = this
      let param = {
        parentId: '0',
        menuId: '0',
        type: '1',
        optMode: '1'
      }
      vm.$http.post(MGNDIRQUERY1, param).then((res) => {
        if (res.status === 200) {
          vm.listData = res.data.data
          // vm.listData = result;
        } else {
          console.error('ajax请求异常！ respones: ' + res)
        }
      })
    })
  }
}
</script>

<style lang="less" scoped>
    .dialog-right{
        overflow: auto;
    }
</style>
